import React from "react";
import { NavBar, Input, Button, Toast} from "antd-mobile";
import "./Login.less";
import { Divider } from "antd-mobile";
import qq from "./images/qq.png";
import wechat from "./images/wechat.png";
import github from "./images/github.png";
import axios from '../../utils/http';

export default function Login(props) {
    //定义状态
    let [phone, setPhone] = React.useState('');
    let [code, setCode] = React.useState('');

    //声明函数
    let sendCode = async () => {
        //检测手机号的格式是否正确
        let reg = /^1\d{10}$/;
        //如果检测不通过
        if(!reg.test(phone)){
            return Toast.show({
                icon: 'fail',
                content: '对不起, 手机号格式错误',
            })
        }
        let result = await axios.post('/login/digits', {phone: phone});
        //判断
        if(result.data.code === 20000){
            Toast.show({
                icon: 'success',
                content: '验证码发送成功',
            })
        }else{
            Toast.show({
                icon: 'fail',
                content: '发送失败, 稍后再试',
            })
        }
    }

    //声明函数 登录
    let login = async () => {
        let result = await axios.post('/login/phone', {phone: phone, code: code});
        //判断结果
        if(result.data.code === 20000){
            //跳转
            Toast.show({
                icon: 'success',
                content: '登录成功',
            });
            // this.props.history.push('/login')
            props.history.push('/usercenter');
        }else{
            Toast.show({
                icon: 'fail',
                content: '验证码检测失败',
            })
        }
        
    }

    return (
        <div className="login-container">
            <NavBar back={null}>手机验证码登录</NavBar>

            {/* 表单区域 */}
            <div className="form">
                <div className="phone">
                    <Input clearable placeholder="请输入手机号" value={phone} onChange={(value) => {
                        setPhone(value);
                    }} />
                </div>
                <div className="h-20"></div>
                <div className="h-10"></div>
                <div className="code">
                    <Input clearable placeholder="请输入验证码" value={code} onChange={(v)=>{
                        setCode(v);
                    }} />
                    <Button size="small" onClick={sendCode}>获取验证码</Button>
                </div>
                <div className="h-20"></div>
                <div className="h-20"></div>
                <Button block color="danger" size="large" onClick={login}>
                    登录
                </Button>
            </div>

            <div className="h-20"></div>
            <div className="h-20"></div>
            {/* 其他登录 start */}
            <div className="other-login">
                <Divider>其他登录方式</Divider>
                <div className="h-10"></div>
                <div className="social">
                    <img src={github} alt="" />
                    <img src={qq} alt="" />
                    <a href="http://localhost:8160/wechat/login"><img src={wechat} alt="" /></a>
                </div>
            </div>
            {/* 其他登录 end */}

            <div className="h-50"></div>

            {/* 版权声明 start */}
            <p className="copyright">
                未注册的手机号, 验证后会自动创建硅谷账号, 登录即代表您同意
                《硅谷隐私政策》
            </p>
            {/* 版权声明 end */}
        </div>
    );
}
